<template>
  <!-- 确认基金序列 -->
  <el-row>
    <el-col :span="24" style="margin-top: 20px">
      <el-card
        style="
          border-radius: 10px;
          background: -webkit-linear-gradient(bottom, #3600f921, #3600f974)
            no-repeat;
        "
      >
        <el-row
          style="
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
          "
        >
          <el-col span="5">
            <div
              style="
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: flex-start;
              "
            >
              <button
                class="el-icon-arrow-left"
                @click="clickmenu"
                style="
                  font-size: 40px;
                  padding: 0px;
                  font-weight: bold;
                  color: #ffffff;
                  background-color: Transparent;
                  border-width: 0px;
                "
              ></button>
              <div style="font-size: 30px; font-weight: bold">方案变更</div>
            </div>
          </el-col>
          <el-col span="19">
            <el-steps :active="2" finish-status="success" simple style="">
              <el-step title="Step 1:用户测评"></el-step>
              <el-step title="Step 2:预期收益率调整"></el-step>
              <el-step title="Step 3:确认基金序列"></el-step>
            </el-steps>
          </el-col>
        </el-row>
      </el-card>

      <el-card
        class="card"
        style="margin-top: 20px; border-radius: 10px"
        body-style="padding:20px"
      >
        <div style="text-align: left; font-size: 25px; font-weight: bold">
          <span
            >基于您前面的选择，给出以下两种最合适的方式，请点击进行选择查看</span
          >
        </div>
        <el-row style="display: flex; align-items: center">
          <el-col span="8">
            <el-row
              style="
                display: flex;
                height: 100px;
                margin-left: 100px;
                margin-top: 50px;
              "
            >
              <div
                style="
                  font-weight: bold;
                  position: absolute;
                  z-index: 2;
                  margin-top: 20px;
                  margin-left: 50px;
                "
                :style="{
                  color: font1color,
                }"
                @click="fangan1()"
              >
                方案一
              </div>
              <div
                style="
                  position: absolute;
                  border-right: 50px solid transparent;
                  border-top: 60px solid;

                  height: 0;
                  width: 100px;
                  z-index: 1;
                "
                :style="{
                  color: font1color,
                  borderTopColor: color1,
                }"
                @click="fangan1()"
              ></div>
              <div
                style="
                  font-weight: bold;
                  z-index: 2;
                  margin-top: 20px;
                  margin-left: 150px;
                "
                :style="{
                  color: font2color,
                }"
                @click="fangan2()"
              >
                方案二
              </div>
              <div
                style="
                  position: absolute;
                  border-left: 50px solid transparent;
                  border-bottom: 60px solid;
                  height: 0;
                  left: 100px;
                  width: 100px;
                  z-index: 0;
                "
                :style="{
                  color: font2color,
                  borderBottomColor: color2,
                }"
                @click="fangan2()"
              ></div>
            </el-row>
          </el-col>
          <el-col span="16">
            <el-row style="display: flex; align-items: center">
              <el-col span="8">
                <BackButton style="width: 80%; height: 80px"></BackButton>
              </el-col>
              <el-col span="8">
                <el-button
                  @click="cofirmplan"
                  style="
                    border-radius: 10px;
                    color: #ffffff;
                    background-color: #39c5bb70;
                    border-width: 3px;
                    border-color: #39c5bb;
                    margin: 30px 0px;
                    padding: 0px;
                    width: 80%;
                    height: 80px;
                  "
                >
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span style="font-size: 30px; font-weight: bold"
                      >确定方案</span
                    >
                    <i
                      class="el-icon-right"
                      style="
                        font-size: 50px;
                        padding-left: 10px;
                        font-weight: bold;
                      "
                    ></i>
                  </div>
                </el-button>
              </el-col>
              <el-col span="8">
                <el-button
                  @click="perchasenow"
                  style="
                    border-radius: 10px;
                    color: #ffffff;
                    background-color: #39c5bb70;
                    border-width: 3px;
                    border-color: #39c5bb;
                    margin: 30px 0px;
                    padding: 0px;
                    width: 80%;
                    height: 80px;
                  "
                >
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span style="font-size: 30px; font-weight: bold"
                      >立即转入</span
                    >
                    <i
                      class="el-icon-coin"
                      style="
                        font-size: 50px;
                        padding-left: 10px;
                        font-weight: bold;
                      "
                    ></i>
                  </div>
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <el-card
        class="card"
        style="margin-top: 20px; border-radius: 10px"
        body-style="padding:20px"
      >
        <div
          slot="header"
          class="clearfix"
          style="
            text-align: left;

            font-size: 25px;
            font-weight: bold;
          "
        >
          <span>持仓详情</span>
        </div>
        <el-row :gutter="20" style="display: flex; align-items: center">
          <el-col span="0.5" style="align-item: center">
            <div
              style="width: 20px; height: 20px; background-color: #169bd570"
            ></div>
          </el-col>
          <el-col span="3">
            <div style="text-align: left; font-size: 18px">固收类基金</div>
          </el-col>
          <el-col span="0.5">
            <div
              style="width: 20px; height: 20px; background-color: #ffb57170"
            ></div>
          </el-col>
          <el-col span="3">
            <div style="text-align: left; font-size: 18px">股票类基金</div>
          </el-col>
        </el-row>

        <el-table
          height="300px"
          max-height="800px"
          :data="tabledata"
          cell-style="text-align:center;font-size:20px"
          header-cell-style="font-size:20px;text-align:center;background: #F5F7FA;"
          :row-class-name="tableRowClassName"
          style="
            margin-top: 20px;
            border-radius: 10px;
            border: 3px;
            border-color: #85c2ff;
          "
        >
          <el-table-column type="expand" label="详情">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="基金名称:">
                  <span>{{ props.row.fund_name }}</span>
                </el-form-item>
                <el-form-item label="基金序号:">
                  <span>{{ props.row.fund_code }}</span>
                </el-form-item>
                <el-form-item label="基金类型:">
                  <span>{{ props.row.fund_show_type }}</span>
                </el-form-item>
                <el-form-item label="基金占比:">
                  <span>{{ props.row.fund_proportion }}</span>
                </el-form-item>
                <el-form-item label="一年波动率:">
                  <span>{{ props.row.volatility_rank_1y }}</span>
                </el-form-item>
                <el-form-item label="一年夏普比率:">
                  <span>{{ props.row.sharpe_rank_1y }}</span>
                </el-form-item>
                <el-form-item label="一年回撤率:">
                  <span>{{ props.row.max_draw_down_1y }}</span>
                </el-form-item>
                <el-form-item label="三年波动率:">
                  <span>{{ props.row.volatility_rank_3y }}</span>
                </el-form-item>
                <el-form-item label="三年夏普比率:">
                  <span>{{ props.row.sharpe_rank_3y }}</span>
                </el-form-item>
                <el-form-item label="三年回撤率:">
                  <span>{{ props.row.max_draw_down_3y }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(val, key, index) in tablelable"
            :key="key"
            :prop="key"
            :label="val"
            :sortable="index != 0 ? true : false"
            :formatter="formatterproportion"
          ></el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getSchemeOneAPI } from "@/api/getSchemeOneAPI";
import { getSchemeTwoAPI } from "@/api/getSchemeTwoAPI";
import { sendUserFundPlanAPI } from "@/api/sendUserFundPlanAPI";
import BackButton from "@/components/BackButton.vue";
export default {
  methods: {
    fangan1() {
      this.font1color = "white";
      this.font2color = "black";
      this.color1 = "#409eff";
      this.color2 = "#ECECEC";
    },
    fangan2() {
      this.font1color = "black";
      this.font2color = "white";
      this.color1 = "#ECECEC";
      this.color2 = "#ffb571";
    },

    tableRowClassName({ row }) {
      if (row.fund_type == "stock_fund" || row.fund_type == "hybrid_fund")
        return "stock-funds";
      if (row.fund_type == "bond_fund")
        return "fixed-income-funds";
      else return "zero-row";
    },

    // 返回主页面
    clickmenu() {
      this.$router.push({
        path:'purchase',
        query:{
          user_id:this.$route.query.user_id
        }
      });
    },
    // 确定方案
     cofirmplan() {
      this.$confirm("点击确定将保存基金方案并返回主页，是否继续？", "确定方案")
        .then(async () => {
          // 发axios请求
          const { data: res } = await sendUserFundPlanAPI(
            this.$qs.stringify({user_id:this.form.user_id,fund_plan_list:JSON.stringify(this.form.list)})
          );
          if (res.flag) {
            this.$message({
              type: "success",
              message: "保存成功!",
            });
            // 跳转回主页面
            this.$router.push({
              path: "purchase",
              query: {
                user_id: this.$route.query.user_id,
              },
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "操作取消",
          });
        });
    },
    // 立即转入
    perchasenow() {
      const confirm = this.$confirm(
        "点击确定将会保存基金方案并进入转入页面，是否继续？",
        "立即转入"
      )
        .then(async () => {
          //发axios请求
          const { data: res } = await sendUserFundPlanAPI(
            this.$qs.stringify({user_id:this.form.user_id,fund_plan_list:JSON.stringify(this.form.list)})
          );
          if (res.flag) {
              this.$message({
              type: "success",
              message: "保存成功!",
            });
            // 跳转到转入页面
            this.$router.push({
              path: "buy",
              query: {
                user_id: this.$route.query.user_id,
              },
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "操作取消",
          });
        });
    },
    // 格式化基金占比
    formatterproportion(row, column) {
      console.log(row[column.property]);
      if (column.property == "fund_proportion") {
        var property = parseFloat(row.fund_proportion) * 100;
        return property.toFixed(2) + "%";
      } else {
        return row[column.property];
      }
    },

    // get请求普通方法
    async getSchemeOne() {
      const { data: res } = await getSchemeOneAPI(this.$route.query.user_id);
      if (res.flag) {
        var show_data = res.data
        // 获取数据并覆盖
        for(let i = 0;i < res.data.length;i++){
          if(show_data[i].fund_type === "hybrid_fund"){
            show_data[i].fund_show_type = "混合型基金" 
          }else if(show_data[i].fund_type === "stock_fund"){
            show_data[i].fund_show_type = "股票型基金"
          }else if(show_data[i].fund_type === "bond_fund"){
            show_data[i].fund_show_type = "债券型基金"
          }else{
            show_data[i].fund_show_type = "未知类型基金"
          }
        }
        this.tabledata1 = show_data;
      }
    },

    async getSchemeTwo() {
      const { data: res } = await getSchemeTwoAPI(this.$route.query.user_id);
      if (res.flag) {
        var show_data = res.data
        // 获取数据并覆盖
        for(let i = 0;i < res.data.length;i++){
          if(show_data[i].fund_type === "hybrid_fund"){
            show_data[i].fund_show_type = "混合型基金" 
          }else if(show_data[i].fund_type === "stock_fund"){
            show_data[i].fund_show_type = "股票型基金"
          }else if(show_data[i].fund_type === "bond_fund"){
            show_data[i].fund_show_type = "债券型基金"
          }else{
            show_data[i].fund_show_type = "未知类型基金"
          }
        }
        this.tabledata2= show_data;
      }
    },
  },
  data() {
    return {
      font1color: "white",
      font2color: "black",
      color1: "#409eff",
      color2: "#ECECEC",
      // 表格数据，基金方案对象，尚未绑定用户id
      tabledata1: [
      ],
      // 表格数据，基金方案对象，尚未绑定用户id
      tabledata2: [
      ],
      tablelable: {
        fund_name: "基金名称",
        fund_show_type: "基金类型",
        fund_proportion: "基金占比",
      },
      // 表单
      form: {
        user_id: this.$route.query.user_id,
        // 里面是fundplan对象
        list: [],
      },
    };
  },
  computed: {
    // 切换表格渲染的内容，切换表单内list的内容
    tabledata() {
      if (this.color1 == "#409eff") {
        this.form.list = this.tabledata1;
        return this.tabledata1;
      }
      if (this.color1 == "#ECECEC") {
        this.form.list = this.tabledata2;
        return this.tabledata2;
      }
    },
  },
created(){
  this.getSchemeOne()
  this.getSchemeTwo()
},

  components: {
    BackButton,
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-table >>> .stock-funds {
  background: #ffb57150;
}

.el-table >>> .fixed-income-funds {
  background: #169bd550;
}
.el-table >>> .zero-row {
  background: #fff7d0;
}

.el-progress >>> .el-progress-circle__track {
  stroke: #169bd5;
}

.el-progress >>> .el-progress__text {
  display: inline-flex;
  justify-content: center;
  width: 50%;
  left: 50%;
  top: 50%;
  padding: 5px;
  border-radius: 30px;
  transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(bottom, #ff9900, #ff0000) no-repeat;
  color: #ffffff;
  font-weight: bold;
}
</style>
